<template>
  <div class="main_body_systemInform">
    <div class="main_body_systemInform_title">
      <div class="main_body_systemInform_title_one">系统通知</div>
    </div>
    <div class="main_body_systemInform_content">
      <div v-for="item in informList" :key="item.id">
        <div class="main_body_systemInform_content_item">
          <div>
            <div class="main_body_systemInform_content_item_one">
              <div class="main_body_systemInform_content_item_one_message">{{ item.message }}</div>
              <a @click="showDrawer(item)" class="main_body_systemInform_content_item_one_button">查看详情</a>
            </div>
            <div class="main_body_systemInform_content_item_two">
              <div class="main_body_systemInform_content_item_two_createTime">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <a-pagination v-model:current="pagination.current"
                    v-model:page-size="pagination.pageSize"
                    :size="pagination.size"
                    :total="pagination.total"
                    :show-total="pagination.showTotal"
                    :show-size-changer="pagination.showSizeChanger"
                    @showSizeChange="pagination.onShowSizeChange"
                    @change="pagination.onChange"
                    show-quick-jumper
                    style="text-align: center;margin: 20px;"
      />
      <a-drawer
          v-model:visible="visible"
          class="custom-class"
          style="margin-top: 70px;"
          title="通知详情"
          placement="right"
      >
        <p>{{ content }}</p>
      </a-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getSystemInform} from "@/api/home/inform";

//是否显示抽屉
const visible = ref<boolean>(false);

//查看详情的内容
const content = ref<string>()

//显示抽屉
const showDrawer = (item: any) => {
  visible.value = true;
  content.value = item.message
};

//通知列表
const informList = ref()

//用户id
const userId = ref<number>(0)

//获取通知
const handleInformList = () => {
  getSystemInform(9, pagination.value.current, pagination.value.pageSize).then((res) => {
    informList.value = res.data.data.map.list
    pagination.value.total = res.data.data.map.total
  })
}

//分页
const pagination = ref({
  size: 'large',
  current: 1,
  pageSize: 7,
  total: 0,
  showTotal: (total: number) => {
    return " 共" + total + "条"
  },
  showSizeChanger: false,
  onShowSizeChange: (current: number, pageSize: number) => {
    pagination.value.pageSize = pageSize
    handleInformList()
  },
  onChange: (current: number) => {
    pagination.value.current = current
    handleInformList()
  }
})

handleInformList()
</script>

<style lang="less" scoped>
.main_body_systemInform {
  width: 1000px;

  .main_body_systemInform_title {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
  }

  .main_body_systemInform_content {
    padding: 0 10px 10px;

    .main_body_systemInform_content_item {
      display: flex;
      margin-top: 10px;
      border-bottom: 1px solid #f0f0f0;
      height: 80px;

      .main_body_systemInform_content_item_one {
        display: flex;
        margin-top: 10px;

        .main_body_systemInform_content_item_one_message {
          width: 800px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .main_body_systemInform_content_item_one_button {
          margin-bottom: -10px;
          cursor: pointer;
          color: #ff0000 !important;
        }
      }

      .main_body_systemInform_content_item_two {
        display: flex;
        width: 963px;
        margin-top: 10px;

        .main_body_systemInform_content_item_two_createTime {
          margin-left: auto;
        }
      }
    }
  }
}
</style>